.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataScreen-container {
  width: 100%;
  height: 100%;
  background: #001237;
  color: #ffffff;
  font-family: PingFang HK, PingFang HK;
  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
    width: 100%;
    height: 100%;
    .dataScreen-header {
      display: flex;
      height: 131px;
      width: 100%;
      padding: 0 36px;
      .header-lf {
        display: flex;
        align-items: center;
        width: 623px;
        height: 113px;
        background: url('../images/header-bg-l.png') no-repeat;
        background-size: 100% 100%;
        .building-name {
          font-weight: 500;
          font-size: 28px;
          color: #E2E7F9;
          position: absolute;
        }
        :deep{
          .build-select {
            opacity: 0;

            .el-select .el-input.is-focus .el-input__wrapper {
              box-shadow: none !important;
            }
            .el-input__inner::placeholder {
              color: #fff;
              text-align:center;
          }
            .el-input__wrapper {
              background-color: transparent;
              box-shadow: none;
              .el-input__inner {
                font-family: PingFang HK, PingFang HK;
                font-weight: 500;
                font-size: 28px;
                color: #E2E7F9 !important;
              }
              .el-input__suffix {
                display: none;
              }
              &.is-focus {
                box-shadow: none !important;
              }
            }
          }
        }
      }
      .header-ct {
        font-weight: 600;
        font-size: 40px;
        text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
        width: 670px;
        height: 131px;
        background: url('../images/header-bg1.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .header-ct-title {
          display: flex;
          font-weight: 600;
          font-size: 44px;
        }
      }
      .header-ri {
        font-size: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        width: 623px;
        height: 113px;
        background: url('../images/header-bg-r.png') no-repeat;
        background-size: 100% 100%;
        .header-time {
          margin-right: 10px;
        }
        .full-icon {
          cursor: pointer;
        }
      }
    }
    .dataScreen-main {
      display: flex;
      flex: 1;
      margin: 20px;
      flex-direction: column;
      .statistics-box {
        font-family: PingFang HK, PingFang HK;
        width: 100%;
        height: 122px;
        margin-bottom: 20px;
        background: url('../images/top-bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-around;
        .box-item {
          display: flex;
          align-items: center;
          justify-content: center;
          .item-img {
            margin-top: 35px;
          }
          .item-right {
            margin-left: 10px;
            .num {
              font-weight: 400;
              font-size: 42px;
            }
          }
        }
      }
      .main {
        display: flex;
        .title {
          width: 390px;
          height: 40px;
          background: url('../images/main-l-title.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 20px;
          font-weight: 600;
          font-size: 24px;
          color: #fdffff;
          margin-bottom: 24px;
        }
        .panel {
          background: #002e4f;
          border: 1px solid #0095a9;
          padding: 10px 15px;
          border-radius: 4px 4px 4px 4px;
        }
        .main-left {
          margin-right: 20px;
          .top-panel {
            width: 438px;
            height: 442px;
            font-weight: 400;
            font-size: 16px;
            color: #e2e7f9;
            .main {
              display: flex;
              flex-wrap: wrap;
              height: 340px;
              overflow: auto;
              .item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin: 0px 9px 10px;
                .item-img {
                  width: 114px;
                  height: 114px;
                  background: #d9d9d9;
                }
                .item-name {
                }
                .item-time {
                }
              }
            }
          }
          .bottom-panel {
            width: 438px;
            height: 311px;
            position: relative;
            .main {
              display: flex;
              .item {
                width: 182px;
                height: 77px;
                margin-left: 10px;
                background: rgba(0, 222, 227, 0.08);
                border-radius: 4px 4px 4px 4px;
                display: flex;
                align-items: center;
                .item-left {
                  width: 29px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 100%;
                  writing-mode: vertical-rl;
                  background: rgba(0, 222, 227, 0.16);
                }
                .item-right {
                  flex: 1;
                  display: flex;
                  .avatar {
                    width: 40px;
                    height: 40px;
                    background: #d9d9d9;
                    border-radius: 35px 35px 35px 35px;
                    margin: 0 5px;
                  }
                  .name {
                    font-size: 20px;
                    font-weight: 500;
                  }
                }
              }
            }
          }
        }
        .main-center {
          margin-right: 20px;
          .top-panel {
            width: 940px;
            height: 495px;
            .title-box {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 290px; /* 底部宽度 */
              height: 0; /* 高度为0 */
              border-top: 40px solid #004966; /* 顶部边框 */
              border-left: 12px solid transparent; /* 左侧边框 */
              border-right: 12px solid transparent; /* 右侧边框 */
              margin-left: 25px;
              .title1 {
                margin-top: -40px;
                color: #00eff4;
                font-size: 24px;
                font-weight: 600;
              }
            }
            .video-box {
              display: flex;
              justify-content: center;
              width: 100%;
              background: #002e4c;
              border-radius: 12px 12px 12px 12px;
              flex-direction: column;
              align-items: center;
              .top-panel-main {
                display: flex;
                justify-content: space-around;
                width: 100%;
                margin-top: 32px;
                .item {
                  width: 274px;
                  height: 385px;
                  background: url('../images/rank-bg.png') no-repeat;
                  background-size: 100% 100%;
                  padding-top: 30px;
                  .out {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    width: 260px;
                    height: 260px;
                    background: url('../images/rank-out-bg.png') no-repeat;
                    background-size: 100% 100%;
                    font-weight: 600;
                    font-size: 24px;
                    color: #ffffff;
                    .avatar {
                      width: 190px;
                      height: 190px;
                      margin-top: 105px;
                      margin-left: -5px;
                      .img {
                        width: 190px;
                        height: 190px;
                        border-radius: 50%;
                      }
                    }
                    .name {
                      margin-top: 45px;
                    }
                  }
                }
              }
            }
          }
          .bottom-panel {
            width: 940px;
            height: 258px;
          }
        }
        .main-right {
          .top-panel {
            width: 454px;
            height: 495px;
            .main {
              display: flex;
              flex-wrap: wrap;
              .item {
                margin: 0 10px 10px 0;
                padding: 10px;
                width: auto;
                height: 40px;
                background: rgba(76, 103, 235, 0.2);
                border-radius: 50px 50px 50px 50px;
              }
            }
          }
          .bottom-panel {
            width: 454px;
            height: 258px;
            margin-top: 12px;
          }
        }
      }
    }
  }
  .no-data-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .dataScreen-main-chart {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
